<template>
    <div class="large-container">
        <img class="page-bg" src="@/assets/img/large-bg.png" />
        <a-spin class="page-loading" tip="Loading..." :spinning="loading">
            <div class="page-main">

                <div class="page-title">
                    <img class="page-title-bg" src="@/assets/img/large-title2.png" />
                    <div class="page-title-word">中医药大学成果转化平台</div>
                </div>
                <div class="page-body">
                    <div class="page-left">
                        <div class="child-panel">
                            <div class="panel-title">
                                <span class="panel-title-word">科技成果占比</span>
                            </div>
                            <AchProVue :pageData="pageData.categoryProportion" v-if="pageData.categoryProportion" />
                        </div>
                        <div class="child-panel" style="margin:15px 0">
                            <div class="panel-title"><span class="panel-title-word">专家人才库</span></div>
                            <TalentVue :pageData="pageData.specialistS" />
                        </div>
                        <div class="child-panel domain-parent">
                            <div class="panel-title"><span class="panel-title-word">专家领域分布</span></div>
                            <DomainVue :pageData="pageData.specialistTerritories" v-if="pageData.specialistTerritories" />
                        </div>
                    </div>
                    <div class="page-mid">
                        <div class="mid-title">
                            <img class="mid-title-bg" src="@/assets/img/large-title1.png" />
                            <div class="mid-title-word">全国科技成果分布图</div>
                        </div>
                        <MapChartVue :pageData="pageData.achievementNum" v-if="pageData.achievementNum>=0"/>
                        <div class="child-panel completionRate-parent">
                            <div class="panel-title"><span class="panel-title-word">成果与需求完成率</span></div>
                            <CompletionRate :pageData="pageData.percentageComplete" v-if="pageData.percentageComplete" />
                        </div>
                    </div>
                    <div class="page-right">
                        <div class="child-panel">
                            <div class="panel-title">
                                <span class="panel-title-word">技术需求占比</span>
                            </div>
                            <DemandRate :pageData="pageData.subCategories" v-if="pageData.subCategories" />
                        </div>
                        <div class="child-panel" style="margin:15px 0">
                            <div class="panel-title"><span class="panel-title-word">技术需求库</span></div>
                            <DemandLibraryVue :pageData="pageData.technologyDemandS" />
                        </div>
                        <div class="child-panel domain-parent">
                            <div class="panel-title"><span class="panel-title-word">技术经纪人才库</span></div>
                            <BrokerLibraryVue :pageData="pageData.brokerS" />
                        </div>
                    </div>
                </div>

            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import AchProVue from "./components/achPro.vue";
import TalentVue from "./components/talent.vue";
import DomainVue from "./components/domain.vue";
import MapChartVue from "./components/mapChart.vue";
import CompletionRate from "./components/completionRate.vue";
import DemandRate from "./components/demandRate.vue";
import DemandLibraryVue from "./components/demandLibrary.vue";
import BrokerLibraryVue from "./components/brokerLibrary.vue";
import api from "@/api/api";
@Component({
    name: "home",
    components: { AchProVue, TalentVue, DomainVue, MapChartVue, CompletionRate, DemandRate, DemandLibraryVue, BrokerLibraryVue },
})
export default class extends Vue {
    loading = false;
    mounted() {
        this.getData();
    }
    pageData = {};
    async getData() {
        this.loading = true;
        try {
            const res = await api.findBigScreenData({});
            this.pageData = res.data;
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.large-container {
    width: 100%;
    height: 100%;
    position: relative;
    .page-bg {
        height: 100%;
        width: 100%;
        min-width: 1360px;
        min-height: 765px;
        display: block;
        z-index: 1;
    }
    .page-main {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .page-title {
        position: relative;
        width: 70%;
        margin: 0 auto;
        flex-shrink: 0;
    }
    .page-title-bg {
        width: 100%;
    }
    .page-title-word {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;

        font-size: 36px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0px 2px 14px #2f65f2;
        font-style: italic;
        letter-spacing: 2px;
    }

    .page-body {
        display: flex;
        height: 100%;
    }

    .panel-title {
        font-size: 22px;
        color: #ffffff;
        width: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .panel-title-word {
        flex-shrink: 0;
        transform: translateY(-2px);
    }
    .panel-title::before {
        content: "";
        display: inline-block;
        height: 20px;
        width: 130px;
        background: linear-gradient(90deg, rgba(17, 94, 144, 0) 0%, #115e90 100%);
        margin-right: 15px;
        flex-grow: 1;
    }
    .panel-title::after {
        content: "";
        display: inline-block;
        height: 20px;
        width: 130px;
        background: linear-gradient(90deg, #115e90 0%, rgba(17, 94, 144, 0) 100%);
        margin-left: 15px;
        flex-grow: 1;
    }

    .page-left {
        width: 28%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        padding-left: 5%;
        padding-right: 10px;
    }
    .child-panel {
        width: 100%;
    }
    .domain-parent {
        flex-grow: 1;
        height: 20vh;
        display: flex;
        flex-direction: column;
        padding-bottom: 10%;
    }
    .page-mid {
        width: 44%;
        display: flex;
        flex-direction: column;
        padding: 0 10px;
    }
    .mid-title {
        position: relative;
        flex-shrink: 0;
        width: 80%;
        margin: 0 auto;
    }
    .mid-title-bg {
        width: 100%;
    }
    .mid-title-word {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        font-size: 24px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0px 2px 14px #2f65f2;
        font-style: italic;
        letter-spacing: 2px;
        transform: translateY(-4px);
    }

    .completionRate-parent {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 4vh;
    }
    .page-loading {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 2;
    }

    /* 自定义整个滚动条 */
    ::-webkit-scrollbar {
        width: 4px; /* 设置滚动条的宽度 */
    }

    /* 自定义滚动条轨道 */
    ::-webkit-scrollbar-track {
        background: rgba(100, 100, 100,0.2); /* 设置轨道的背景颜色 */
    }

    /* 自定义滚动条的滑块（thumb） */
    ::-webkit-scrollbar-thumb {
        background: rgba(68, 187, 255,0.7); /* 设置滑块的背景颜色 */
    }

    /* 当滑块悬停或活动时自定义滚动条的滑块 */
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* 设置滑块在悬停状态下的背景颜色 */
    }
}
</style>
